<template>
	<!--公司下拉选择组件 -->
	<view>
		<u-popup v-model="showflak" @close="cancelMultiple" mode="bottom" :zIndex="10088"
			:overlayStyle="{zIndex:'10088'}" :customStyle="{width:'100%'}">
			<view class="multipleBody">
				<view class="title">
					<view class="close">
					</view>
					<view class="name">
						{{ title }}
					</view>
					<view class="confirm" @click="cancelMultiple">
						X
					</view>
				</view>
				<!-- 搜索狂 -->
				<view class="search" v-if="searchShow">
					<uni-search-bar v-model="keyword" @clear="keyword = ''" placeholder="请输入关键字"
						@confirm="changeHandler" @cancel="keyword = ''"></uni-search-bar>
				</view>
				<!-- 滚动区域内容 -->
				<view class="mapList">
					<scroll-view class="diet-mapList" scroll-y="true">
						<view v-for="(item, index) in mapList" :class="['item']" @click="onChange(index, item)"
							:key="index">
							<span>{{ item.label }}</span>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 引入公共头部组件
	import {
		//获取公司列表数据
		DepartmentTreeDataList
	} from "@/api/interface.js";
	export default {
		name: "Company",

		props: {
			// 标题
			title: {
				type: String,
				default: ''
			},
		},
		components: {},
		data() {
			return {
				columns: [],
				// 列表数据
				mapList: [],
				// 出场动画
				animationData: {},
				// 搜索的值
				keyword: '',
				// 超过10条显示搜索
				searchShow: false,
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				showflak: false,
				pagination: {
					PageIndex: 1,
					PageRows: 10,
					SortField: "Id",
					SortType: "desc",
				},
				userInfo: {},
			};
		},
		onLoad() {},
		methods: {
			// 点击选中
			onChange(index, item) {
				this.$emit("cancel");
				// 自定义 change 事件获取选中的值 
				this.$emit("change", {
					label: item.label,
					value: item.value
				});

			},
			// 输入框change
			changeHandler(val) {
				// 后续根据需求开发**************************************8
				// let arr = []
				// this.mapList.forEach(item => {
				// 	if (item.label.indexOf(val) != -1) {
				// 		arr.push(item)
				// 	}
				// })
				// this.mapList = arr
				// // this.mapList = this.mapList.filter((item) => {
				// // 	return item.label.includes(val)
				// // })
				// console.log('搜索的值', val, arr)
			},
			// 弹出框开启触发事件
			openMultiple() {
				// 该代码保留**************************************************
				// this.mapList = Object.assign([], this.columns);
				// 该代码保留**************************************************
			},
			// 关闭/取消
			cancelMultiple() {
				this.$emit("cancel");
			},
			// 关闭底部弹窗
			close() {
				this.showflak = false
			},
			// 打开底部弹窗
			open(columns) {
				this.showflak = true
				this.mapList = columns
				// 超过10条显示搜索
				// if (this.mapList.length >= 3) {
				// 	this.searchShow = true
				// } else {
				// 	this.searchShow = false
				// }
				console.log('获取传递过来的colurmns', columns)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.multipleBody {
		width: 100%;
		// 给弹窗内的内容固定一个高度  避免搜索后 高度坍塌
		height: 380px;
		padding: 30rpx;
		box-sizing: border-box;
		padding-bottom: 80rpx;

		.title {
			font-size: 28rpx;
			display: flex;
			flex-direction: row;

			.close {
				width: 80rpx;
				opacity: .5;
			}

			.name {
				width: 530rpx;
				text-align: center;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}

			.confirm {
				width: 80rpx;
				text-align: right;
			}
		}

		.mapList {
			width: 100%;
			padding-top: 30rpx;
			position: relative;

			.mask {
				width: 100%;
				height: 120rpx;
				position: absolute;
				left: 0;
				z-index: 2;
				pointer-events: none;

				&.mask-top {
					top: 20rpx;
					background-image: linear-gradient(to bottom, #fff, rgba(#fff, 0));
				}

				&.mask-bottom {
					bottom: -4rpx;
					background-image: linear-gradient(to bottom, rgba(#fff, 0), #fff);
				}
			}

			.diet-mapList {
				/* 数据可视部分高度 */
				max-height: 500rpx;
			}

			.item {
				position: relative;
				width: 100%;
				line-height: 40rpx;
				border-bottom: 1px solid rgba($color: #000000, $alpha: .05);
				padding: 20rpx 0;
				font-size: 28rpx;
				box-sizing: border-box;
				text-align: center;

				span {
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					padding: 0 40rpx;
				}

				.icon {
					position: absolute;
					right: 10rpx;
					top: 50%;
					transform: translateY(-50%);
					height: 16px;
				}

				&.checked {
					color: #2D8DFF;
				}

				&:last-child {
					border-bottom: none;
					margin-bottom: 60rpx;
				}

				&:first-child {
					margin-top: 60rpx;
				}
			}
		}
	}
</style>